<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>学员信息</title>
  <!-- 导入bootstrap -->
  <script src="./assets/lib/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="./assets/lib/bootstrap/bootstrap.min.css" />
  <script src="./assets/lib/bootstrap/bootstrap.min.js"></script>
  <!-- bootstrap提示框 -->
  <script src="./assets/lib/toasts.js"></script>
  <!-- 导入axios + axios全局配置 -->
  <script src="./assets/lib/axios.js"></script>
  <script src="./assets/utils/request.js"></script>
  <!-- 导入自己写的css -->
  <link rel="stylesheet" href="./assets/css/student.css" />
</head>

<body>
  <!-- 添加学员 弹窗内容部分 start -->
  <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title addModalLabel">录入新学员</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="" class="container add-form">
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">姓名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control form-control-sm" name="name" placeholder="学员姓名" />
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">年龄</label>
              <div class="col-sm-10">
                <input type="text" class="form-control form-control-sm" name="age" placeholder="学员年龄" />
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">组号</label>
              <div class="col-sm-10">
                <select class="form-select form-select-sm" name="group">
                  <option selected value="">请选择一个组号</option>
                  <option value="1">1组</option>
                  <option value="2">2组</option>
                  <option value="3">3组</option>
                  <option value="4">4组</option>
                  <option value="5">5组</option>
                  <option value="6">6组</option>
                  <option value="7">7组</option>
                  <option value="8">8组</option>
                  <option value="9">9组</option>
                  <option value="10">10组</option>
                  <option value="11">11组</option>
                  <option value="12">12组</option>
                  <option value="13">13组</option>
                  <option value="14">14组</option>
                  <option value="15">15组</option>
                </select>
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">性别</label>
              <div class="col-sm-10 self-valign">
                <div class="col-sm-1 form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="sex" value="男" checked />
                  <label class="form-check-label">男</label>
                </div>
                <div class="col-sm-1 form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="sex" value="女" />
                  <label class="form-check-label">女</label>
                </div>
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">手机</label>
              <div class="col-sm-10">
                <input type="text" class="form-control form-control-sm" name="phone" placeholder="手机号" />
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">薪资</label>
              <div class="col-sm-5">
                <input type="text" class="form-control form-control-sm" name="salary" placeholder="期望薪资" />
              </div>
              <div class="col-sm-5">
                <input type="text" class="form-control form-control-sm" name="truesalary" placeholder="实际薪资" />
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">籍贯</label>
              <div class="col-sm-3">
                <select class="form-select form-select-sm" name="province">
                  <option selected value="">--省--</option>
                </select>
              </div>
              <div class="col-sm-3">
                <select class="form-select form-select-sm" name="city">
                  <option selected value="">--市--</option>
                </select>
              </div>
              <div class="col-sm-3">
                <select class="form-select form-select-sm" name="county">
                  <option selected value="">--区/县--</option>
                </select>
              </div>
            </div>

            <div class="row mb-3">
              <div class="col-sm-2"></div>
              <div class="col-sm-10">
                <button type="submit" class="btn btn-primary btn-sm btnAddStudent">
                  确认添加
                </button>
                <button type="reset" class="btn btn-secondary btn-sm">
                  重置
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- 添加学员 弹窗内容部分 end -->

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid header">
      <h1>学员管理</h1>
      <!-- 添加学生信息按钮 -->
      <button type="button" class="btn btn-primary btn-sm modal-dialog-centered btnAddStu">
        添加学员
      </button>
    </div>
  </nav>

  <!-- table-striped隔行换色 -->
  <table class="table table-striped">
    <colgroup>
      <col width="7%" />
      <col width="8%" />
      <col width="7%" />
      <col width="7%" />
      <col width="7%" />
      <col width="10%" />
      <col width="10%" />
      <col width="10%" />
      <col width="24%" />
      <col width="10%" />
    </colgroup>
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">姓名</th>
        <th scope="col">年龄</th>
        <th scope="col">性别</th>
        <th scope="col">组号</th>
        <th scope="col">联系电话</th>
        <th scope="col">期望薪资</th>
        <th scope="col">实际薪资</th>
        <th scope="col">籍贯</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <th scope="row">10</th>
        <td>张三</td>
        <td>20</td>
        <td>女</td>
        <td>1</td>
        <td>13261266666</td>
        <td>120000</td>
        <td>14000</td>
        <td>河北省承德市围场县</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm">修改</button>
          <button type="button" class="btn btn-danger btn-sm">删除</button>
        </td>
      </tr> -->
    </tbody>
  </table>

  <!-- 页面js代码 -->
  <script src="./assets/js/student.js"></script>
  <script src="./assets/js/index.js"></script>
  <script src="./assets/js/common.js"></script>
  <script src="./assets/lib/form-serialize.js"></script>
  <script>
    /*  //判断有没有token
     if (!localStorage.getItem('token')) {
       location.href = './login.html'
     }
     //从本地取出并渲染
     document.querySelector('.user span').innerHTML = localStorage.getItem('username')
     //退出返回登录页面
     document.querySelector('.logout').addEventListener('click', () => {
       localStorage.clear()
       location.href = './login.html'
     }) */

    //1.默认加载学员信息列表 
    //页面加载时,请求获取首页统计数据
    async function getStudent() {
      const res = await axios({
        url: '/student/list'
      })
      // console.log(res)//data.data
      document.querySelector('tbody').innerHTML = res.data.data.map(item => `
      <tr>
        <th scope="row">${item.id}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.province}${item.city}${item.county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm" data-id=${item.id}>修改</button>
          <button type="button" class="btn btn-danger btn-sm" data-id=${item.id}>删除</button>
        </td>
      </tr>
      `).join('')
    }
    getStudent()

    //     2.添加学员 ：bootstrap模态框(跟课堂模态框有一点点区别)

    // ​      显示模态框语法：  $('#addModal').modal('show')

    // ​      隐藏模态框语法：   $('#addModal').modal('hide')
    const modal = new bootstrap.Modal('.modal-dialog-centered')
    const form = document.querySelector('.add-form')
    const province = document.querySelector('[name=province]')
    const city = document.querySelector('[name=city]')
    const county = document.querySelector('[name=county]')

    document.querySelector('.btnAddStu').addEventListener('click', async () => {
      $('#addModal').modal('show')

      //3.省市县三级联动
      const res = await axios({
        url: '/geo/province'
      })
      //console.log(res)//data
      //省份
      province.innerHTML = '<option selected value="">--省--</option>' + res.data.map(item => `<option selected value=${item}>--${item}--</option>`)


    })

    //市
    province.addEventListener('change', async () => {
      //清空区里面的内容
      county.innerHTML = '<option selected value="">--区/县--</option>'
      const res = await axios({
        url: '/geo/city',
        params: {
          pname: province.value
        }
      })
      // console.log(res)//data
      city.innerHTML = '<option selected value="">--市--</option>' + res.data.map(item => `<option selected value=${item}>--${item}--</option>`)
    })

    //区
    city.addEventListener('change', async () => {
      const res = await axios({
        url: '/geo/county',
        params: {
          pname: province.value,
          cname: city.value
        }
      })
      //console.log(res)//data
      county.innerHTML = '<option selected value="">--区/县--</option>' + res.data.map(item => `<option selected value=${item}>--${item}--</option>`)
    })

    //4.点击确认按钮提交表单
    document.querySelector('.btnAddStudent').addEventListener('click', async (e) => {
      e.preventDefault()
      //收集表单信息
      const data = serialize(form, { hash: true, empty: true })
      //数据转换
      // data.age = +data.age
      // data.sex = +data.sex
      // data.truesalary = +data.truesalary
      // data.salary = +data.salary
      // data.group = +data.group
      // data.phone = +data.phone
      console.log(data)
      //发添加请求
      const res = await axios({
        url: '/student/add',
        method: 'post',
        data
      })
      console.log(res)
      $('#addModal').modal('hide')
      getStudent()
    })

    //5.重置按钮
    document.querySelector('.btn-secondary').addEventListener('click', () => {
      form.reset()
    })

    //6.删除学员信息
    document.querySelector('tbody').addEventListener('click', async e => {
      //e.preventDefault()
      if (e.target.classList.contains('btn-danger')) {
        //console.log(111)
        const id = e.target.dataset.id
        //发请求
        const res = await axios({
          url: '/student/delete',
          method: 'DELETE',
          params: {
            id
          }
        })
        //console.log(res)
        getStudent()
      }
    })

    //7.修改学员信息
    document.querySelector('tbody').addEventListener('click', async e => {
      e.preventDefault()
      if (e.target.classList.contains('btn-primary')) {
        const id = e.target.dataset.id
        $('#addModal').modal('show')
        document.querySelector('.modal-title').innerHTML = '修改学员信息'

        //发请求先获取学生信息
        const res = await axios({
          url: '/student/one',
          params: {
            id
          }
        })
        console.log(res.data.data)

        //再获取籍贯渲染
        const pRes = await axios({
          url: '/geo/province'
        })
        //console.log(pRes)//data
        province.innerHTML = '<option value="">--省份--</option>' + pRes.data.map(item => `<option value="${item}">${item}</option>`).join('')


        // 获取城市
        const cRes = await axios({
          url: '/geo/city',
          params: {
            pname: res.data.data.province
          }
        })
        // console.log(cRes)//data
        city.innerHTML = '<option value="">--城市--</option>' + cRes.data.map(item => `'<option value="${item}">${item}</option>'`)


        // 获取地区
        const aRes = await axios({
          url: '/geo/county',
          params: {
            pname: res.data.data.province,
            cname: res.data.data.city
          }
        })
        //console.log(aRes)//data
        county.innerHTML = '<option value="">--地区--</option>' + aRes.data.map(item => `'<option value="${item}">${item}</option>'`)

        //数据回显
        Object.keys(res.data.data).forEach(k => {
          // console.log(k, res.data.data[k])

          //对sex单独进行处理
          if (k === 'sex') {
            const sexs = document.querySelectorAll('[name=sex]')
            const index = res.data.data[k] === '男' ? 0 : 1
            //console.log(index)//男 女 用三元来判断男女
            //console.log(sexs)//0是男 1是女 数组
            sexs[index].checked = true
          }

          //将数据回显到表单的value中
          const el = document.querySelector(`[name=${k}`)
          if (el) {
            el.value = res.data.data[k]
          }

        })
      }
    })


  </script>
</body>

</html>